<template>
  <div class="mainLessons">
    <van-nav-bar
      title="运动课程"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <SearchInput :placeText="placeText" class="inputBox"></SearchInput>
    <div class="lessons">
      <van-tabs class="lesson-tabs" v-model="active" :color="color" swipeable>
        <van-tab :title="tab1">
          <div class="item" v-for="(i, index) in lessonList" :key="index">
            <div class="left">
              <img v-bind:src="i.img" class="image" />
            </div>
            <div class="right">
              <div class="top">
                <span class="lesson-name">{{ i.lessonName }}</span>
                <div class="lesson-level-div">
                  <span
                    class="lesson-level"
                    v-bind:style="{
                      'background-color': i.levelColor,
                      color: i.nameColor,
                    }"
                    >{{ i.level }}</span
                  >
                </div>
              </div>
              <div class="bottom">{{ i.desc }}</div>
            </div>
          </div>
        </van-tab>
        <van-tab :title="tab2">
          <div class="item" v-for="(i, index) in mylessonList" :key="index">
            <div class="left">
              <img v-bind:src="i.img" class="image" />
            </div>
            <div class="right">
              <div class="top">
                <span class="lesson-name">{{ i.lessonName }}</span>
                <div class="lesson-level-div">
                  <span
                    class="lesson-level"
                    v-bind:style="{
                      'background-color': i.levelColor,
                      color: i.nameColor,
                    }"
                    >{{ i.level }}</span
                  >
                </div>
              </div>
              <div class="bottom">{{ i.desc }}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import SearchInput from "../components/SearchInput.vue";

export default {
  name: "SportLessons",
  components: {
    SearchInput,
  },
  data() {
    return {
      backAddr: "/community",
      title: "运动课程",
      placeText: "足球课",
      tab1: "全部课程",
      tab2: "我的课程",
      color: "#64b587",
      lessonList: [
        {
          img: require("../assets/lesson/baseball.png"),
          lessonName: "棒球课",
          level: "初级",
          desc: "欢迎加入我们的课程",
          levelColor: "#E8FAF7",
          nameColor: "#57D1A8",
        },
        {
          img: require("../assets/lesson/boxing.png"),
          lessonName: "拳击课",
          level: "中级",
          desc: "欢迎加入我们的课程",
          levelColor: "#FFF0E3",
          nameColor: "#DF9860",
        },
        {
          img: require("../assets/lesson/football.png"),
          lessonName: "足球课",
          level: "高级",
          desc: "欢迎加入我们的课程",
          levelColor: "#F8EFFD",
          nameColor: "#CD99F0",
        },
        {
          img: require("../assets/lesson/gymnastics.png"),
          lessonName: "体操课",
          level: "高级",
          desc: "欢迎加入我们的课程",
          levelColor: "#F8EFFD",
          nameColor: "#CD99F0",
        },
      ],
      mylessonList: [
        {
          img: require("../assets/lesson/run.png"),
          lessonName: "跑步课",
          level: "初级",
          desc: "欢迎加入我们的课程",
          levelColor: "#E8FAF7",
          nameColor: "#57D1A8",
        },
        {
          img: require("../assets/lesson/tennis.png"),
          lessonName: "网球课",
          level: "初级",
          desc: "欢迎加入我们的课程",
          levelColor: "#E8FAF7",
          nameColor: "#57D1A8",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ path: this.backAddr });
    },
  },
};
</script>
<style lang="scss">
body {
  background-color: #f6f7f7;
}

.mainLessons {
  width: 375px;
  margin: 0;
  .lessons {
    border-radius: 5px;
    margin: 10px 10px 10px 10px;
    .lesson-tabs {
    }
    .van-tabs__wrap {
      border-radius: 5px;
      height: 50px;
    }
    .van-tabs__content {
      margin: 10px 0px 0px 0px;
    }
  }
}
.inputBox {
  margin: 10px 10px 10px 10px;
}
.item {
  height: 120px;
  border-radius: 10px;
  display: flex;
  background-color: white;
  margin: 0px 0px 10px 0px;
  align-items: center;
  .left {
    flex: 0.2;
    margin: 10px;
    border-radius: 40px;
    .image {
      width: 80px;
      height: 80px;
      border-radius: 40px;
    }
  }
}
.right {
  flex: 0.8;
  margin-left: 10px;
  .top {
    display: flex;
    margin-bottom: 5px;
    .lesson-level {
      margin-left: 15px;
      padding: 3px 15px 3px 15px;
      border-radius: 5px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    }
    .lesson-name {
      padding: 5px;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .bottom {
    color: #b9b9b9;
    margin-left: 5px;
  }
}
.lesson-level-div {
  display: flex;
  align-items: center;
}
.van-nav-bar {
  background-color: #64b587;

  .van-nav-bar__title {
    color: white;
    font-weight: bold;
  }
  .van-icon {
    color: white;
  }
}
</style>